<template>
  <div class="container">
    <div class="container-top">
      <div class="top-name">{{type?'查看商品':'新增/编辑商品'}}</div>
    </div>
    <div class="header">
      <el-button
        type="primary"
        @click="back"
      >返回</el-button>
    </div>
    <div class="main">
      <el-form
        :model="information"
        :rules="rules"
        ref="information"
        label-width="180px"
        class=""
      >
        <div class="sub_title">{{type?'商品分类':"选择商品分类"}}</div>
        <el-form-item
          label="选择商品分类:"
          prop="categoryId"
         >
          <el-select
            filterable
            v-model='information.firstCategoryParent'
            placeholder='-请选择-'
            :disabled = type
            @change="sortChange"
          >
            <el-option
              v-for="item in sortArr"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            ></el-option>
          </el-select>

          <el-select
            filterable
            v-model='information.categoryParent'
            placeholder='-请选择-'
            :disabled = type
            @change="sortChange1"
          >
            <el-option
              v-for="item in sortArr1"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-select
            filterable
            v-model='information.category'
            placeholder='-请选择-'
            :disabled = type
          >
            <el-option
              v-for="item in sortArr2"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="sub_title">基本信息</div>

        <el-form-item
          label="售卖状态："
          prop="status"
        >
          <div v-if="type">{{information.status == 'SALE'?'立即上架':'放入仓库'}}</div>
          <el-radio
            v-if="!type"
            v-model="information.status"
            label="SALE"
          >立即上架</el-radio>
          <el-radio
            v-if="!type"
            v-model="information.status"
            label="NOTSALE"
          >放入仓库</el-radio>
        </el-form-item>
        <!-- <el-form-item label="所属分类:">
          {{categoryName||'--'}}
        </el-form-item> -->
        <el-form-item
          label="商品标题:"
          prop="title"
        >
          <div v-if="type">{{information.title}}</div>
          <el-input
            v-if="!type"
            v-model="information.title "
            placeholder="请输入"
            maxLength="60"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="供应商:"
          prop="supplierId"
        >
          <el-select
            filterable
            v-model='information.supplierId'
            placeholder='-请选择-'
            :disabled = type
          >
            <el-option
              v-for="item in manageArr"
              :key="item.id"
              :label="item.supplierName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="生产地:"
          prop="productPlace"
        >
          <el-input
            v-model="information.productPlace"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商品主图："
          prop="imageList"
          class="image-item"
        >
          <div v-if="type" class="imgs-wrap">
            <img @click="codeShow(item.url)" style="width:150px;height:120px;cursor:pointer" v-for="(item,index) in imageList" :key="index" :src="item.url" alt="">
          </div>
          <el-upload
            v-if="!type"
            list-type="picture-card"
            class="normal-uploader"
            :http-request="myUpload"
            action=''
            :limit='9'
            multiple
            :file-list='imageList'
            :on-remove="handleImageRemove"
            :before-upload="beforeImageUpload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div v-if="!type" class="up-tips">建议上传封面尺寸：500*400,数量最大10张</div>
        </el-form-item>
        <el-form-item
          v-if="!type"
          label="主图排序："
          prop="imageList"
          class="image-item"
        >
        <div class="arrow-wrap">
            <!-- <div class="arrow-title">主图排序：</div> -->
            <div class="arrow-item box" v-for="(item,index) in imageList" :key="index">
              <i @click="imgLeft(item,index)" class="el-icon-arrow-left"></i>
              图片{{index+1}}
              <i @click="imgright(item,index)" class="el-icon-arrow-right"></i>
            </div>
          </div>
          
        </el-form-item>
        <el-form-item
          label="商品展示图："
          prop="exampleImage"
         >
          <el-upload
            :disabled="type"
            class="avatar-uploader"
            :http-request="myUpload"
            :action="upLoadUrl"
            :show-file-list="false"
            :before-upload="beforeCoverUpload"
          >
            <img
              @click="codeShow(imageUrl1)"
              v-if="imageUrl1"
              :src="imageUrl1"
              class="avatar"
            >
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
            ></i>
          </el-upload>
          <div v-if="!type" class="up-tips">建议上传封面尺寸：800*800</div>
        </el-form-item>
        <el-form-item
          label="支付方式:"
          prop="productType"
         >
          <el-select
            filterable
            :disabled="type"
            v-model='information.productType'
            placeholder='-请选择-'
          >
            <el-option
              label="红包"
              value="GOLD"
            ></el-option>
            <!-- <el-option
              label="银豆"
              value="SILVER"
            ></el-option> -->
            <el-option
              label="人民币激活"
              value="RMB"
            ></el-option>
            <el-option
              label="人民币购买"
              value="RMB_ORDINARY"
            ></el-option>
            
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="information.productType == 'GOLD'"
          label="是否热门商品:"
          prop="isHot"
         >
          <el-select
            :disabled="type"
            filterable
            v-model='information.isHot'
            placeholder='-请选择-'
          >
            <el-option
              label="是"
              value="y"
            ></el-option>
            <el-option
              label="否"
              value="n"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="information.productType == 'GOLD'"
          label="是否新品商品:"
          prop="isNew"
         >
          <el-select
            :disabled="type"
            filterable
            v-model='information.isNew'
            placeholder='-请选择-'
          >
            <el-option
              label="是"
              value="y"
            ></el-option>
            <el-option
              label="否"
              value="n"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item
          label="销售价格:"
          prop="salePrice"
        >
          <div v-if="type">{{information.salePrice}}</div>
          <el-input
            v-if="!type"
            v-model="information.salePrice "
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item
            label="成本价格:"
            v-if="information.productType == 'RMB'"
            prop="costPrice"
          >
          <div v-if="type">{{information.costPrice}}</div>
          <el-input v-if="!type"
            v-model="information.costPrice "
            placeholder="请输入"
          ></el-input>
        </el-form-item> -->
        <div class="sub_title">商品规格（销售属性）</div>
        <div
          style="margin:10px 0 10px 120px;"
          class="sub_title1" 
        >规格设置</div>
        <el-form-item
          label="颜色："
          prop="imageFileKey"
          class="category-item"
          >
          <div
            class="category-list"
            v-for="(item,index) in cateArr"
            :key="index"
          >
            <i
              v-if="!type"
              @click="cateDelete(index)"
              class="el-icon-delete"
            ></i>
            <div v-if="type">{{item.name}}</div>
            <el-input
              v-if="!type"
              v-model="item.name"
              placeholder="请输入"
              maxLength="5"
              :disabled="information.isDistribution=='y'"
            ></el-input>
            <el-upload
              class="avatar-uploader"
              :http-request="myUpload"
              :action="upLoadUrl"
              :show-file-list="false"
              :before-upload="(file)=>{imageUpload(file,index)}"
              :disabled="information.isDistribution=='y'||type"
            >
              <img
                v-if="item.fileUrl"
                @click="codeShow(item.fileUrl)"
                :src="item.fileUrl"
                class="avatar"
              >
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i>
            </el-upload>
          </div>
          <div v-if="!type" class="category-list">
            <div
            
              @click="addCategory"
              class="add"
            >
              <i class="el-icon-plus"></i>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          label="尺码："
          class="mode-item"
         >
          <div
            v-for="(item,index) in sizeArr"
            class="mode-list"
            :key="index"
          >
            <i
              v-if="!type"
              @click="sizeDelete(index)"
              class="el-icon-delete"
            ></i>
            <el-input v-if="!type"
              v-model="item.name "
              placeholder="请输入"
              maxLength="5"
              :disabled="information.isDistribution=='y'"
            ></el-input>
             <div v-if="type">{{item.name}}</div>
          </div>
          <div
            @click="sizeAdd"
            class="mode-list"
            v-if="!type"
          >
            <div class="add">
              <i class="el-icon-plus"></i>
            </div>
          </div>
        </el-form-item>
        <div
          style="margin:10px 0 30px 120px;"
          class="sub_title1"
        >库存价格管理</div>
        <div  class="price-item ">
          <div class="price-list">
            销售价格： <el-input v-if="!type"
              width="100"
              v-model="information.salePrice"
              placeholder="请输入"
              :disabled="information.isDistribution=='y'||type"
            ></el-input>
            <span v-if="type">{{information.salePrice}}</span>
          </div>
          <div v-if="!type" class="price-list">
            <el-button
              @click="priceBtn"
              type="primary"
              :disabled="information.isDistribution=='y'"
            >一键填充</el-button>
          </div>
        </div>

        <div  class="table-cate">
          <div class="table-head">
            <div class="head-list">颜色</div>
            <div class="head-list">尺码</div>
            <div class="head-list">条码</div>
            <div class="head-list">库存</div>
            <div class="head-list">成本价格</div>
            <div class="head-list">销售价格</div>
            <div class="head-list">是否开启规格</div>
          </div>
          <div
            v-for="(item,index) in information.modelList"
            :key="index"
            class="table-item"
           >
            <div class="table-list">{{item.modelName}}</div>
            <div class="table-list">{{item.modelSize}}</div>
             <div class="table-list">
              <el-input v-if="!type"
                v-model="item.modelCode"
                placeholder="请输入"
                :disabled="information.isDistribution=='y'"
              ></el-input>
              <div v-if="type">{{item.modelCode}}</div>
            </div>
            <div class="table-list">
              <el-input v-if="!type"
                v-model="item.modelStock"
                placeholder="请输入"
                :disabled="information.isDistribution=='y'"
              ></el-input>
              <div v-if="type">{{item.modelStock}}</div>
            </div>
            <div class="table-list">
              <el-input v-if="!type"
                v-model="item.costPrice"
                placeholder="请输入"
                :disabled="information.isDistribution=='y'"
              ></el-input>
              <div v-if="type">{{item.costPrice}}</div>
            </div>
            <div class="table-list">
              <el-input v-if="!type"
                v-model="item.modelSalePrice"
                placeholder="请输入"
                :disabled="information.isDistribution=='y'"
              ></el-input>
              <div v-if="type">{{item.modelSalePrice}}</div>
            </div>
            <div class="table-list">
              <el-checkbox v-if="!type"
                v-model="item.isDistribution"
                true-label="y"
                false-label="n"
                :checked="item.isDistribution == 'y'"
              ></el-checkbox>
              <div v-if="type">{{item.isDistribution == 'y'?'是':'否'}}</div>
            </div>
          </div>
          <div v-if="!information.modelList.length" class="no-data">暂无数据</div>
        </div>
        <el-form-item
          label="商品详情图文"
          prop="detail"
        >
          <bg-editor
            v-if="!type"
            :minHeight="300"
            :uploadUrl="upLoadUrl"
            :content="information.detail"
            @editorData='editorInfo'
          >
          </bg-editor>
          <div v-if="type" v-html="information.detail" class="detail-content"></div>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="!type"
            type="primary"
            @click="submitForm('information')"
            :loading="loading"
          >保存</el-button>
          <el-button
            type="primary"
            @click="back"
          >返回</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
        title="查看图片"
        :visible.sync="codeState"
        width="40%">
        <img style="width:100%" :src="codeImg" alt="">
        <span slot="footer" class="dialog-footer">
            <el-button type="cancel" @click="codeState = false">关闭</el-button>
        </span>
    </el-dialog>
  </div>

</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
import $ from "jquery";
export default {
  data() {
    return {
      codeState:false,
      codeImg:'',
      url: "broadcastEdit",
      id: "",
      isEdit: false,
      currentPage: 1,
      upLoadUrl: "",
      // 单张封面
      coverImage: "",
      imageUrl1:"",
      fileList: [],
      bannerArr: [
        {
          name: "首页弹窗广告",
          id: "POP_ADVERTISEMENT"
        },
        {
          name: "首页banner图",
          id: "BANNER"
        }
      ],
      information: {
        costPrice:'',
        category: "",
        firstCategoryParent:"",
        categoryParent: "",
        detail: "",
        id: "",
        imageFileKeys:'',
        exampleImageFileKey:'',
        isHot:'',
        isNew:"",
        modelList: [],
        productCode: "",
        salePrice: "",
        status: "",
        title: "",
        isDistribution:"",
        supplierId:'',
        productPlace:'',
        productType:''
      },
      manageArr:[],
      cateArr: [],
      sizeArr: [],
      sortArr: [],
      sortArr1: [],
      imageList:[],
      sortArr2:[],
      rules: {
       
      },
      loading: false,
      currentPage: 1,
      categoryName: "",
      stockNums: "",
      eidtState: false,
      type:''
    };
  },
  components: {
    "bg-editor": () => import("../common/bg-editor.vue")
  },
  watch: {
    "information.status": function() {
      if (this.information.status != "TIME") {
        this.information.shelfTime = "";
      }
    },
    "information.category": function(val) {
      this.sortArr2.map(item => {
        if (item.id == val) {
          this.categoryName = item.categoryName;
        }
      });
    },
    'information.productType':function(val){

    },
    cateArr: {
      handler: function(newVal, oldVal) {
        if (!this.eidtState) {
          this.modeMath();
        }
      },
      deep: true
    },
    sizeArr: {
      handler: function(newVal, oldVal) {
        if (!this.eidtState) {
          this.modeMath();
        }
      },
      deep: true
    },
    "information.modelList": {
      handler: function(newVal, oldVal) {
        let num = 0;
        this.information.modelList.map(item => {
          if (item.modelStock) {
            num += Number(item.modelStock);
          }
        });
        this.stockNums = num;
      },
      deep: true
    }
  },
  mounted() {
    this.currentPage = this.$router.currentRoute.query.currentPage
      ? this.$router.currentRoute.query.currentPage
      : 1;
    this.id = this.$router.currentRoute.query.id;
    this.type = this.$router.currentRoute.query.type;
    let sessionId = sessionStorage.getItem("sessionId");
    this.getList();
    this.getManageList()
    this.upLoadUrl =
      CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS + "?sessionId=" + sessionId;
    if (this.id) {
      this.getDetailById();
    }
  },
  methods: {
    getManageList: function() {
      let url = CONSTANT.URL.LIST.supplierPaper;
      let data = {
        pageIndex: 1,
        pageSize: 10000
      };
      common.post(url, data, res => {
        this.manageArr = res.data.bussData;
      });
    },
    codeShow(pic){
      if(!this.type) return
        this.codeState = true
        this.codeImg = pic
      },
    handleImageRemove(e) {
      this.imageList.forEach((item, index) => {
        if (item.fileKey == e.fileKey) {
          this.imageList.splice(index, 1);
        }
      });
    },
    cateDelete(index) {
      if(this.information.isDistribution == 'y'){
        return false;
      }
      this.cateArr.splice(index, 1);
    },
    sizeDelete(index) {
      if( this.information.isDistribution=='y'){
        return false
      }
      this.sizeArr.splice(index, 1);
    },
    priceBtn() {
      this.information.modelList.forEach(item => {
        item.modelLinePrice = this.information.linePrice;
        item.modelSalePrice = this.information.salePrice;
      });
    },
    modeMath() {
      if (this.cateArr.length && this.sizeArr.length) {
        console.log(this.cateArr, this.sizeArr)
        let arr = [],
          num = 0;
        this.cateArr.map(item => {
          this.sizeArr.map(list => {
            arr.push({
              isDistribution: "y",
              modelCode: "",
              modelImageFileKey: item.fileKey,
              modelLinePrice: "",
              modelName: item.name,
              modelSalePrice: "",
              modelSize: list.name,
              modelStock: "",
              productCode: "",
              costPrice: "",
              id: ''
            });
          });
        });
        this.information.modelList.map(list=>{
          arr.forEach(item=>{
            if(
              item.modelName == list.modelName
              &&item.modelSize == list.modelSize){
                item.isDistribution = list.isDistribution
                item.modelCode = list.modelCode
                item.modelLinePrice = list.modelLinePrice
                item.modelSalePrice = list.modelSalePrice
                item.modelStock = list.modelStock
                item.productCode = list.productCode
                item.id = list.id,
                item.costPrice = list.costPrice
              }
          })
        })
        this.information.modelList = arr;
      }
    },
    sizeAdd() {
      if(this.information.isDistribution=='y'){
        return false;
      }
      this.sizeArr.push({
        name: ""
      });
    },
    addCategory() {
      if(this.information.isDistribution=='y'){
        return false;
      }
      this.cateArr.push({
        name: "",
        fileUrl:this.imageUrl1||'',
        fileKey: this.information.exampleImageFileKey||''
      });
    },
    sortChange(val,state) {
      console.log(state)
      if(!state){
        this.information.categoryParent = ""
        this.information.category = ''
      }
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000,
        parentId: val
      };
      common.post(url, data, res => {
        this.sortArr1 = res.data.bussData;
      });
    },
    sortChange1(val,state) {
      if(!state){
        this.information.category = ''
      }
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000,
        parentId: val
      };
      common.post(url, data, res => {
        this.sortArr2 = res.data.bussData;
      });
    },
    getList: function() {
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000
      };
      common.post(url, data, res => {
        this.sortArr = res.data.bussData;
      });
    },
    handleClick(e) {
      this.$router.push(`/${e.name}`);
    },
    getDetailById: function() {
      let url = CONSTANT.URL.LIST.PRODUCTBYID;
      common.get(url, `/${this.id}`, res => {
        if (res.code == 200) {
          let data = res.data.bussData
          data.imageUrls.forEach(item => {
            item.url = item.fileUrl;
          });
          this.imageList = data.imageUrls
          this.imageUrl1 = data.exampleImageUrl.fileUrl
          console.log(this.imageUrls,'sssssss')
          this.eidtState = true;
          this.information = {
              category: data.category,
              firstCategoryParent: data.firstCategoryParent,
              categoryParent: data.categoryParent,
              detail: data.detail,
              id: data.id,
              imageFileKeys:data.imageFileKeys,
              exampleImageFileKey:data.exampleImageFileKey,
              modelList: data.modelList,
              productCode: data.productCode,
              salePrice: data.salePrice,
              status:data.status,
              title:data.title,
              isDistribution:data.isDistribution,
              isHot:data.isHot, 
              isNew:data.isNew,
              costPrice:data.costPrice,
              supplierId:data.supplierId,
              productType:data.productType,
              productPlace:data.productPlace
          };
          console.log(this.information.modelList,'ss')
          this.categoryName = data.categoryName
          this.sortChange(data.firstCategoryParent,true)
          this.sortChange1(data.categoryParent,true)
          data.sizeList.forEach(item => {
            this.sizeArr.push({
              name: item
            });
          });
          $('#summernote').summernote('code', data.detail)
          data.colorList.forEach(item => {
            this.cateArr.push({
              name: item.modelName,
              fileUrl: item.modelImageUrl,
              fileKey: item.modelImageFileKey
            });
          });
          setTimeout(() => {
            this.eidtState = false;
          });
        }
      });
    },
    editorInfo(val) {
      this.information.detail = val;
    },
    back() {
      this.$router.push({
        path: "/goodList",
        query: { pageIndex: this.currentPage }
      });
    },
    getList: function() {
      let url = CONSTANT.URL.LIST.SORTBYPAGE;
      let data = {
        pageIndex: 1,
        pageSize: 100000,
        levelCount:1
      };
      common.post(url, data, res => {
        this.sortArr = res.data.bussData;
      });
    },
    submitForm(formName) {
      if(this.imageList&&this.imageList.length){
          let arr = []
          this.imageList.map(item=>{
            arr.push(item.fileKey)
          })
          this.information.imageFileKeys = arr.join(',')
        }
        console.log(this.information,'this.imageList')
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          let url = CONSTANT.URL.LIST.PRODUCTEDIT;
          common.post(url, this.information, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.loading = false;
              this.$router.replace({
                path: "/goodList",
                query: { pageIndex: this.currentPage }
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.errMsg
              });
              this.loading = false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    linkToList() {
      this.$router.push("/goodList");
    },
    back() {
      this.$router.push({
        path: "/goodList",
        query: { pageIndex: this.currentPage }
      });
    },
    myUpload(content) {}, // 重写覆盖上传方法
    beforeImageUpload(file) {
      let url =
        CONSTANT.URL.SYSTEM.ADMINUPLOADFILE 

      common.formPost(url, {'suffix':file.name.split(".")[1]}, res => { 
        let data = res.data.bussData;
        common.uploadFile(data.uploadUrl, file, file.type, res => {
          let item = {};
          item.fileKey = data.fileKey;
          item.url = data.downloadUrl;
          this.imageList.push(item);
        });
      });
    },
    beforeCoverUpload(file) {
      let url =
        CONSTANT.URL.SYSTEM.ADMINUPLOADFILE 

      common.formPost(url, {'suffix':file.name.split(".")[1]}, res => { 
        let data = res.data.bussData;
        common.uploadFile(data.uploadUrl, file, file.type, res => {
          this.information.exampleImageFileKey = data.fileKey;
          this.imageUrl1 = data.downloadUrl;
        });
      });
    },
    imageUpload(file, index) {
      let url =
        CONSTANT.URL.SYSTEM.ADMINUPLOADFILE 

      common.formPost(url, {'suffix':file.name.split(".")[1]}, res => { 
        let data = res.data.bussData;
        common.uploadFile(data.uploadUrl, file, file.type, res => {
          this.cateArr[index].fileKey = data.fileKey;
          this.cateArr[index].fileUrl = data.downloadUrl;
          console.log(this.cateArr);
        });
      });
    },
    imgLeft(obj,index){
      var arr = this.imageList
      if(index == 0){
        arr.splice(index,1)
        arr.push(obj)
      }else{
        arr.splice(index,1)
        arr.splice(index-1, 0, obj)
      }
    },
    imgright(obj,index){
      var arr = this.imageList
      if(index == arr.length-1){
        arr.splice(index,1)
        arr.unshift(obj)
      }else{
        arr.splice(index,1)
        arr.splice(index+1, 0, obj)
      }
    }
  }
};
</script>
<style lang="scss">
.category-item {
  overflow-x: hidden;
  .name {
    float: left;
  }
}
.arrow-wrap{
  position: relative;
  // top: -10px;
  overflow: hidden;
  .arrow-title{
    position: absolute;
    left: -20px;
    font-size: 14px;
    color: #606266;
  }
  .arrow-item{
    position: relative;
    float: left;
    width: 148px;
    margin-right: 8px;
    justify-content: space-between;
    text-align: center;
    .el-icon-arrow-left{
      position: absolute;
      left: 10px;
      top: 10px;
    }
    .el-icon-arrow-right{
      position: absolute;
      right: 10px;
      top: 10px;
    }
    i{
      font-size: 20px;
      cursor: pointer;
    }
  }
}
.price-item {
  overflow: hidden;
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
  padding-left: 120px;
  .price-list {
    float: left;
    margin-right: 20px;
    .el-input {
      width: 120px !important;
      input {
        width: 120px !important;
      }
    }
  }
}
.table-cate {
  font-size: 14px;
  color: #606266;
  width: 70%;
  margin-left: 8%;
  margin-bottom: 30px;
  .table-head {
    overflow: hidden;
    display: flex;
    background-color: #d1d1d1;
    color: #333;
    .head-list {
      flex: 1;
      float: left;
      text-align: center;
      height: 40px;
      line-height: 40px;
    }
  }
  .no-data{
    border: 1px solid #e1e1e1;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .table-item {
    overflow: hidden;
    display: flex;
    background-color: #fff;
    color: #333;
    border: 1px solid #e1e1e1;
    .table-list {
      flex: 1;
      float: left;
      text-align: center;
      height: 50px;
      line-height: 50px;
      border-right: 1px solid #e1e1e1;
      .el-input {
        float: left;
        width: 90% !important;
        margin-left: 5%;
        input {
          width: 100% !important;
        }
      }
      &:last-child {
        border-right: 0;
      }
    }
  }
}
.mode-item {
  .mode-list {
    position: relative;
    float: left;
    margin-right: 20px;
    .el-icon-delete {
      cursor: pointer;
      position: absolute;
      right: 35px;
      bottom: 0px;
      z-index: 100;
    }
    .el-input {
      float: left;
      width: 80px !important;
      margin-bottom: 20px;
      input {
        width: 80px !important;
      }
    }
    .add {
      font-size: 26px;
      color: #409eff;
      cursor: pointer;
    }
  }
}
.category-list {
  position: relative;
  float: left;
  min-height: 170px;
  margin-right: 20px;
  width: 85px;
  text-align: center;
  .el-icon-delete {
    cursor: pointer;
    position: absolute;
    right: 40px;
    bottom: 10px;
    z-index: 100;
  }
  .add {
    font-size: 26px;
    color: #409eff;
    cursor: pointer;
  }
  .el-input {
    float: left;
    width: 80px !important;
    margin-bottom: 20px;
    input {
      width: 80px !important;
    }
  }
  .avatar-uploader,
  .avatar-uploader-icon,
  .avatar {
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
  }
}
</style>
